﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<form id="form1">
    <div style="padding-top: 20px; margin-right: 20px;">
        <table class="form">
            <tr>
                <th class="formTitle">活动标题</th>
                <td class="formValue" colspan="5">
                    <input id="F_Title" name="F_Title" type="text" class="form-control required" placeholder="请录入活动标题" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">活动主题</th>
                <td class="formValue" colspan="5">
                    <input id="F_Subject" name="F_Subject" type="text" class="form-control required" placeholder="请录入活动主题" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">社区对象</th>
                <td class="formValue">
                    <select id="F_CommunityObjectType" name="F_CommunityObjectType" class="form-control">
                        <option value="">==请录入社区对象==</option>
                    </select>
                </td>
                <th class="formTitle">金额</th>
                <td class="formValue">
                    <input id="F_Price" name="F_Price" type="text" class="form-control required" placeholder="请录入金额" />
                </td>
                <th class="formTitle">消费类型</th>
                <td class="formValue">
                    <select id="F_ConsumeType" name="F_ConsumeType" class="form-control">
                        <option value="">==请录入消费类型==</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th class="formTitle">出行类型</th>
                <td class="formValue">
                    <select id="F_TripType" name="F_TripType" class="form-control">
                        <option value="">==请录入出行类型==</option>
                    </select>
                </td>
                <th class="formTitle">发起人手机号</th>
                <td class="formValue">
                    <input id="F_Phone" name="F_Phone" type="text" class="form-control required" placeholder="请录入发起人手机号" />
                </td>
                <th class="formTitle">发起人</th>
                <td class="formValue">
                    <input id="F_Initiator" name="F_Initiator" type="text" class="form-control required" placeholder="请录入发起人" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">开始时间</th>
                <td class="formValue">
                    <input id="F_StartTime" name="F_StartTime" type="text" class="form-control input-wdatepicker required" onfocus="WdatePicker()" placeholder="请录入开始时间" />
                </td>
                <th class="formTitle">结束时间</th>
                <td class="formValue">
                    <input id="F_EndTime" name="F_EndTime" type="text" class="form-control input-wdatepicker required" onfocus="WdatePicker()" placeholder="请录入结束时间" />
                </td>
                <th class="formTitle">活动地址</th>
                <td class="formValue">
                    <input id="F_Address" name="F_Address" type="text" class="form-control required" placeholder="请录入活动地址" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">活动内容</th>
                <td class="formValue" colspan="5">
                    <div class="mail-body" style="padding: 0px;">
                        @*<textarea id="F_Content" name="F_Content" class="form-control" rows="15" placeholder="请录入活动内容"></textarea>*@
                        <script id="F_Content" name="F_Content" type="text/plain" style="width:100%;height:350px;">
                        </script>
                    </div>
                </td>
            </tr>
            <tr>
                <th class="formTitle">上传编辑器内图片</th>
                <td class="formValue" colspan="2">
                    <input id="F_img" type="file" class="form-control" accept="image/png,image/jpeg,image/gif">
                </td>
                <td class="formValue" colspan="2">
                    <input type="button" value="上传" class=" btn btn-primary" id="F_imgBtn">
                    <input type="button" value="复制图片路劲" class=" btn btn-primary" id="copy_imgurlBtn">
                    <input type="text" id="F_imgurl" style="width:68%;float:right" class="form-control" name="F_imgurl" value="" placeholder="上传成功后的图片路劲" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">是否公开活动</th>
                <td class="formValue">
                    <select id="F_IsPublic" name="F_IsPublic" class="form-control">
                        <option value="true">公开</option>
                        <option value="false">不公开</option>
                    </select>
                </td>
                <th class="formTitle"></th>
                <td class="formValue"></td>
            </tr>
        </table>
    </div>
</form>

@section Content {
    <script type="text/javascript" charset="utf-8" src="~/Content/js/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="~/Content/js/ueditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="~/Content/js/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script>

       
        var editor;
        var keyValue = $.request("keyValue");
        $(function () {
            editor = UE.getEditor('F_Content');
            getItemList();
            if (!!keyValue) {
                $.ajax({
                    url: "/MiniSite/SiteActivity/GetFormJson",
                    data: { keyValue: keyValue },
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        $("#form1").formSerialize(data);
                        //editor.setContent(data.F_content);
                    }
                });
            }
        });
        function getItemList() {
            $.ajax({
                url: "/MiniSite/SiteActivity/GetItemListJson",
                dataType: "json",
                async: false,
                success: function (data) {
                    initControl(data)
                }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(XMLHttpRequest);
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            });
        }
        function submitForm() {
            if (!editor.hasContents()) {
                $.modalMsg("请添加活动内容!", "success");
                return false;
            }
            var params = $("#form1").formSerialize();
            $.extend(params, {
                F_content: editor.getContent()
            });

            if (!$('#form1').formValid()) {
                return false;
            }
            $.submitForm({
                url: "/MiniSite/SiteActivity/SubmitForm?keyValue=" + keyValue,
                param: params,
                success: function () {
                    $.currentWindow().$("#gridList").trigger("reloadGrid");
                }
            })
        }
        function initControl(ItemList) {
            var trip = ItemList.Trip;
            for (var i = 0; i < trip.length; i++) {
                $("#F_TripType").append("<option value='" + trip[i].F_ItemCode + "'>" + trip[i].F_ItemName + "</option>");
            }
            var Consume = ItemList.Consume;
            for (var i = 0; i < Consume.length; i++) {
                $("#F_ConsumeType").append("<option value='" + Consume[i].F_ItemCode + "'>" + Consume[i].F_ItemName + "</option>");
            }
            var CommunityObject = ItemList.CommunityObject;
            for (var i = 0; i < CommunityObject.length; i++) {
                $("#F_CommunityObjectType").append("<option value='" + CommunityObject[i].F_ItemCode + "'>" + CommunityObject[i].F_ItemName + "</option>");
            }

            $("#F_TripType").bindSelect()//出行类型
            $("#F_ConsumeType").bindSelect()//消费类型
            $("#F_CommunityObjectType").bindSelect()//社区
        }
        $("#F_imgBtn").on('click', function () {
            var argsId = "F_img";
            var hrefId = "F_imgurl";
            uploadSend(argsId, hrefId);

        })
        $("#F_MainimgBtn").on('click', function () {
            var argsId = "F_Mainimg";
            var hrefId = "F_MainimgUrl";
            uploadSend(argsId, hrefId);

        })
        $("#copy_imgurlBtn").on('click', function () {
            var Url2 = document.getElementById("F_imgurl");
            Url2.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            $.modalMsg("已复制", "success");
        });
        function uploadSend(argsId, hrefId) {
            var data = new FormData();
            var item = document.getElementById(argsId);


            if (item != null) {
                var file = item.files[0];
                fileSize = file.size;
                fileSize = Math.round(fileSize / 1024 * 100) / 100; //kb
                if (fileSize > 2048) {
                    $.modalMsg('该文件超过2mb，请上传2mb以内的图片！', 'error');
                    return false;
                }
                data.append(file.name, file);
                var xhr = new XMLHttpRequest();
                xhr.onload = function () {
                    data = JSON.parse(xhr.responseText);
                    if (data.state == 1) {
                        console.log(data);
                        document.getElementById(hrefId).value = data.data;
                        $.modalMsg("上传成功", "success");
                    } else {
                        alert(data.msg);
                    }
                };
                xhr.onerror = function (err) {
                    console.error(err);
                    document.getElementById(hrefId).value = '';
                };
                xhr.open('post', '/SiteManage/Site/UploadAttachment', true);
                xhr.send(data);
            }
        }
    </script>
}


